<template>
  <div class="container">
    <!-- 1 A模块的state数据 只有state需要加模块名-->
    <p>{{ $store.state.modeleA.username }}</p>
    <!-- A模块的getters -->
    <p>{{ $store.getters.newName }}</p>
    <!-- 1 B模块的state数据 -->
    <p>{{ $store.state.modeleB.username }}</p>
    <!-- A模块的getters 加了命名空间需要加模块名-->
    <p>{{ $store.getters["modeleB/newName"] }}</p>
    <button @click="mutationsFn">mutationsFn</button>
    <button @click="actionsFn">actionsFn</button>
  </div>
</template>

<script>
import { useStore } from 'vuex'
export default {
  name: 'App',
  setup () {
    const store = useStore()
    const actionsFn = () => {
      // 提交B模块的修改
      store.dispatch('modeleB/updateName')
    }
    const mutationsFn = () => {
      store.commit('modeleB/updateName')
    }
    return { mutationsFn, actionsFn }
  }
}
</script>
<style  scoped lang="less">
</style>
